<template>
    <transition :name="transitionName">
        <div :class="classes" :style="styles">
            <div :class="[baseClass + '-content']" ref="content" v-html="content"></div>
            <a :class="[baseClass + '-close']" @click="close" v-if="closable">
                <i class="ivu-icon ivu-icon-ios-close-empty"></i>
            </a>
        </div>
    </transition>
</template>
<script>
    export default {
        props: {
            prefixCls: {
                type: String,
                default: ''
            },
            duration: {
                type: Number,
                default: 1.5
            },
            content: {
                type: String,
                default: ''
            },
            styles: {
                type: Object,
                default: function() {
                    return {
                        right: '50%'
                    };
                }
            },
            closable: {
                type: Boolean,
                default: false
            },
            className: {
                type: String
            },
            name: {
                type: String,
                required: true
            },
            onClose: {
                type: Function
            },
            transitionName: {
                type: String
            }
        },
        data () {
            return {
                withDesc: false
            };
        },
        computed: {
            baseClass () {
                return `${this.prefixCls}-notice`;
            },
            classes () {
                return [
                    this.baseClass,
                    {
                        [`${this.className}`]: !!this.className,
                        [`${this.baseClass}-closable`]: this.closable,
                        [`${this.baseClass}-with-desc`]: this.withDesc
                    }
                ];
            },
            contentClasses () {
                return `${this.baseClass}-content`;
            }
        },
        methods: {
            clearCloseTimer () {
                if (this.closeTimer) {
                    clearTimeout(this.closeTimer);
                    this.closeTimer = null;
                }
            },
            close () {
                this.clearCloseTimer();
                this.onClose();
                this.$parent.close(this.name);
            }
        },
        mounted () {
            this.clearCloseTimer();

            if (this.duration !== 0) {
                this.closeTimer = setTimeout(() => {
                    this.close();
                }, this.duration * 1000);
            }

            // check if with desc in Notice component
            if (this.prefixCls === 'ivu-notice') {
                this.withDesc = this.$refs.content.querySelectorAll(`.${this.prefixCls}-desc`)[0].innerHTML !== '';
            }
        },
        beforeDestroy () {
            this.clearCloseTimer();
        }
    };
</script>

      <style>
.ivu-message{font-size:12px;position:fixed;z-index:1010;width:100%;top:16px;left:0}
.ivu-message-notice{width:auto;vertical-align:middle;position:absolute;left:50%}
.ivu-message-notice-content{position:relative;right:50%;padding:8px 16px;border-radius:4px;box-shadow:0 1px 6px rgba(0,0,0,.2);background:#fff;display:block}
.ivu-message-success .ivu-icon{color:#0c6}
.ivu-message-error .ivu-icon{color:#f30}
.ivu-message-warning .ivu-icon{color:#f90}
.ivu-message-info .ivu-icon,
.ivu-message-loading .ivu-icon{color:#39f}
.ivu-message .ivu-icon{margin-right:8px;font-size:14px;top:1px;position:relative}

/*icon
*info,success,warning,error,load
*/
.ivu-icon-information-circled:before{content:"\f149"}
.ivu-icon-checkmark-circled:before{content:"\f120"}
.ivu-icon-android-alert:before{content:"\f35b"}
.ivu-icon-close-circled:before{content:"\f128"}
.ivu-icon-load-c:before{content:"\f29c"}
.ivu-load-loop{animation:ani-load-loop 1s linear infinite}
@keyframes ani-load-loop{
	from{transform:rotate(0)}
	50%{transform:rotate(180deg)}
	to{transform:rotate(360deg)}
}
        </style>